<template>
	<view class="bgColor">
		<watermark></watermark>
		<view class="search-friends">
			<view class="search-friends-list">
				<view class="search-friends-list-item" v-for="(v,i) in list" :key="i">
					<image class="search-friends-list-img" :src="v.avatar" mode="aspectFill"></image>
					<view class="search-friends-list-user">
						<view class="search-friends-list-username">{{v.name}}</view>
						<view class="search-friends-list-remark">邀请人：{{v.yaoqing_uname}}</view>
					</view>
					<view class="search-friends-list-btns">
						<view class="search-friends-list-btn-text">
							<view class="search-friends-list-btn btn2" @click="agreeApplyjj(v.id)">拒绝</view>
						</view>
					</view>
					<view class="search-friends-list-btns" style="margin-left: 20rpx;">
						<view class="search-friends-list-btn-text">
							<view class="search-friends-list-btn btn1" @click="agreeApply(v.id)">接受</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more v-show="list.length > 19" :status="queryParams.status"></uni-load-more>
		<view class="alertTips" v-if="list.length <= 0">暂无需要审核的加群申请</view>
	</view>
</template>
<script>
	import {
		timestampFormat,datetime_to_unix
	} from '../../common/time.js';
	export default {
		data() {
			return {
				queryParams: {
					refreshing: false,
					status: 'more',
					pageNum: 1,
					pageSize: 20
				},
                is_submit:0,
				groupId: '',
				list:[]
			};
		},
		onLoad(e){
			this.groupId = e.groupId;
		},
		onShow() {
			this.queryParams.refreshing = true
			this.applyList()
		},
		methods: {
			fmtTime(time) {
				return timestampFormat(time);
			},
			agreeApply(e){
    			uni.showLoading({
    				title: '提交中'
    			});
                if(this.is_submit==1)return;this.is_submit=1;
				this.$http.request({
					url: '/group/applyagree',
					method: 'POST',
					data:JSON.stringify({
						groupId: this.groupId,
						applyId: e,
						status: 1
					}),
					success: (res) => {
						if (res.data.code == 200) {
    				       if(res.data.data.portrait){
                                var key  = "GROUP"+this.groupId;
    							var data=this.$store.state.chatlist && this.$store.state.chatlist[key]?this.$store.state.chatlist[key]:{};
    							
    							data.portrait=res.data.data.portrait
    							this.$store.dispatch('updateChatListInfoById', {
    								userId: key,
    								data: data
    							});
                            }
						    
							var content = '你审核'+res.data.data.content+'加入了群聊';
							this.$fc.pushAlertMsg({
    							msgContent: content, 	//msg内容
    							windowType: 'GROUP', 	//聊天室类型 SINGLE GROUP
    							userId: this.groupId, 	//ID
							});
                            
                            setTimeout(()=>{
                                this.is_submit=0;
                            },1000);
						    this.$fc.ToastBack('已同意');
							this.queryParams.refreshing = true
							this.applyList()
						}else{
    					   this.is_submit=0;
    					}
					}
				});
			},
			agreeApplyjj(e){
    			uni.showLoading({
    				title: '提交中'
    			});
				this.$http.request({
					url: '/group/applyagree',
					method: 'POST',
					data:JSON.stringify({
						groupId: this.groupId,
						applyId: e,
						status: 2
					}),
					success: (res) => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '已拒绝',
								icon: 'none'
							})
							this.queryParams.refreshing = true
							this.applyList()
						}
					}
				});
			},
			applyList(){
				this.queryParams.status='loading'
				this.$fc.loadMore({
					url: '/group/get_apply_group_list?groupId=' + this.groupId,
					queryParams: this.queryParams
				}).then(res => {
					this.queryParams = res.queryParams;
					if (res.status == '3') {
						this.list=[]
						return
					}
					if (res.status == '0') {
						return
					}
					var rows = res.list;
					var list = [];
					for (var i = 0; i < rows.length; i++) {
						var item = rows[i];
						list.push(item);
					}
					if (res.status == '2') {
						this.list = list;
					}
					if (res.status=='1') {
						this.list = this.list.concat(list);
					}
				});
			},
		},
		onReachBottom() {
			this.applyList();
		},
	}
</script>

<style scoped>
	/* #ifdef APP-PLUS */
	.bgColor{
	    position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background: #EDEDED;
	    z-index: -1;
		overflow: auto;
	  }
	/* #endif */
	/* #ifdef H5 */
	page{
		background: #EDEDED;
	}
	/* #endif */
	.search-friends{
		display: flex;
		flex-direction: column;
	}
	.search-friends-input{
		margin:20rpx 24rpx;
		margin-bottom: 0;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: #fff;
		border-radius: 24rpx;
	}
	.search-friends-list{
		background-color: #fff;
		display: flex;flex-direction: column;
	}
	.search-friends-list-item{
		padding:0 24rpx;
		display: flex;flex-direction: row;align-items: center;
	}
	.search-friends-list-user{
		flex: 1;
		padding: 24rpx;
		border-bottom: 1px #eee solid;
		max-width: 470rpx;
	}
	.search-friends-list-username{
		font-size: 32rpx;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.search-friends-list-title{
		font-size: 28rpx;
		color: #666;
		margin: 24rpx;
	}
	.search-friends-list-remark{
		font-size: 27rpx;
		color: #999;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 12rpx;
	}
	.search-friends-list-item:nth-last-child(1) .search-friends-list-user{
		border: none;
	}
	.search-friends-list-img{
		min-width: 90rpx;
		width: 90rpx;
		height: 90rpx;
		border-radius: 10rpx;
	}
	.search-friends-list-btns{
		margin-left: auto;
	}
	.search-friends-list-btn{
		text-align: center;
		border-radius: 12rpx;
		padding:  8rpx 12rpx;
	}
	.search-friends-list-btn-text{
		color: #999;
		font-size: 28rpx;
	}
	.search-friends-list-btn.btn1{
		background-color: #1BC418;
		color: #fff;
	}
	.search-friends-list-btn.btn2{
		background-color: #c4c4c4;
		color: #fff;
	}
	.search-friends-list-btn.btn3{
		background-color: #ff6767;
		color: #fff;
	}
	.alertTips {
		line-height: 80rpx;
		background-color: #fcfcfc;
		color: #999999;
		text-align: center;
		font-size: 28rpx;
	}
</style>
